/**
 * 通知公告
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="boxBlock"> 
      <div class="serachTop"> 
         <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
          <el-form-item  >
            <el-input
              size="small"
              v-model="formInline.noticeTitle"
              placeholder="输入标题"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search"
              >搜索</el-button
            >
            <!-- <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit()"
              v-if="userInfo.userType == '00'"
            >
              发布
            </el-button> -->
          </el-form-item>
        </el-form>
      </div>
   
   
    <!--列表-->
    <div class="ra_box">
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column prop="noticeId" label="ID" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="noticeTitle" label="标题" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="noticeContent" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{ scope.row.updateTime }}</div>
        </template>
      </el-table-column> -->
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" plain @click="handleEdit(scope.$index, scope.row)" 
            :key="scope.$index" v-if="hasPermission0">
              查看
            </el-button>

            <!-- <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 编辑界面 -->
    <el-dialog
      title="详情"
      :close-on-click-modal="false"
      :visible.sync="editFormVisible"
      width="500px"
      @close="closeDialog('editForm')"
    >
      <el-form label-width="100px" :model="editForm" ref="editForm">
        <el-form-item label="标题:">
          {{ editForm.noticeTitle }}
        </el-form-item>
        <el-form-item label="内容:">
          <pre class="n_content">{{ editForm.noticeContent }}</pre>
        </el-form-item>
        <el-form-item label="创建时间:" v-if="editForm.createTime">
          {{ editForm.createTime }}
        </el-form-item>
        <!-- <el-form-item label="更新时间" v-if="editForm.updateTime">
          <el-input
            size="small"
            v-model="editForm.updateTime"
            auto-complete="off"
            :disabled="editForm.updateTime != ''"
          ></el-input>
        </el-form-item> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      userInfo: "", 
      loading: false,
      editFormVisible: false,
      b: format,
      editForm: {
        noticeContent: "",
        noticeId: "",
        noticeTitle: "",
        noticeType: 2,
      },
      formInline: {
        noticeTitle: "",
        noticeContent: "",
        noticeType: "2",
        pageNum: 1,
        pageSize: 10,
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission0:false
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    if (this.$store.state.user) {
      this.userInfo = JSON.parse(this.$store.state.user);
      
    } 
    this.getdata(this.formInline); 
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
      this.hasPermission0 = this.$hasPermission(this.userInfo,['user0']) 
    },
  },
  methods: {
    hasPermissionMethod(data) {
      // 调用全局公共方法
      this.userInfo = JSON.parse(this.$store.state.user);
      return this.$hasPermission(this.userInfo,['user0']) 
    },
    getdata(parameter) {
      this.loading = true;
      let url = getUrl(parameter);
      service
        .get("/jwt/getNoticeList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.pageNum = parm.currentPage;
      this.pageSize = parm.pageSize;
      this.getdata( {
        ...this.formInline, 
        pageNum:this.pageNum,
        pageSize:this.pageSize
      });
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit(index, row) {
      this.editFormVisible = true;
      if (row) {
        this.editForm = row;
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
      this.$refs.editForm.resetFields();
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.n_content >>> img {
  width: 100% !important;
}
</style>

 
 

 